<template>
  <!-- 二核-承保变更通知书 -->
  <div class="insuredbox">
    <el-row>
      <el-col :span="24">
        <span style="float:right;margin:20px 20px">
          <el-button type="primary" plain v-print="'#printMe'" size="mini">打印</el-button>
        </span>
      </el-col>
    </el-row>
    <div id="printMe">
      <p style="page-break-before:always"></p>
      <div v-for="(item,index) in contexts" :key="index" style="page-break-before:always;">
        <el-row >
          <el-col :span="15">
            <div style="margin-bottom: 15px;text-align:right;">
              <img width="250px" height="80px" src="../../../assets/img/Logo_mianxx.png">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
            <p style="font-family:楷体;font-size: 24px;margin-bottom: 10px;text-align:right;">中信保诚人寿保险有限公司</p>
            <p style="font-family:楷体;font-size: 18px;text-align:right;" v-show="item.li_count > 0">承保内容变更通知书&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
            <p style="font-family:楷体;font-size: 18px;text-align:right;" v-show="item.li_count == 0">解除合同通知书&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
          </el-col>
          <el-col :span="1">&nbsp;</el-col>
          <el-col :span="8">
            <!-- <div>
              <div><svg id="barcode"></svg></div>
              <p style="font-family:Code39FiveText;">*&nbsp;&nbsp;M&nbsp;&nbsp;0&nbsp;&nbsp;1&nbsp;&nbsp;0&nbsp;&nbsp;0&nbsp;&nbsp;4&nbsp;&nbsp;0&nbsp;&nbsp;1&nbsp;&nbsp;*</p>
            </div> -->
            <div>
              <p style="height:53px;font-size:33px;font-family:Code39FiveText;">*M0100401*</p>
            </div>
            <p style="font-family: 'SimSun';font-size: 18px;margin-bottom: 6px;">客户服务热线</p>
            <p style="font-family: 'SimSun';font-size: 18px;">4008-838-838或95558</p>
          </el-col>
        </el-row>
        <div style="margin-top:30px" >
          <el-row >
            <el-col :span="24">
              <el-col :span="12" style="font-family: 宋体;line-height:26px;">理赔号码:{{ item.dto.clmnum }}</el-col>
              <el-col :span="12" style="font-family: 宋体;line-height:26px;">服务营销员/代码:{{ item.dto.agntInfo }}</el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="12" style="font-family: 宋体;line-height:26px;">被保险人姓名:{{ item.dto.lifcnum }}</el-col>
              <el-col :span="12" style="font-family: 宋体;line-height:26px;">所属营销员服务部/代码:{{ item.dto.saluntnmAgencyNo }}</el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="12" style="font-family: 宋体;line-height:26px;">投保人姓名:{{ item.dto.cownnum }}</el-col>
              <el-col :span="12" style="font-family: 宋体;line-height:26px;">营销员联络电话:{{ item.dto.cltphone01 }}</el-col>
            </el-col>
          </el-row>
          <p style="margin-top:20px;font-family: 宋体;">尊敬的&nbsp;{{item.dto.cownnum}}&nbsp;先生/女士</p>
          <p style="margin-top:4px;font-family: 宋体;">&nbsp;&nbsp;您好！感谢您对中信保诚人寿的信任和支持！</p>
          <!-- 承保内容变更通知书 -->
          <p v-show="item.li_count > 0" style="margin-top:4px;font-family: 宋体;line-height:20px;">&nbsp;&nbsp;保单号码为：{{item.dto.chdrnum}}。因本次索赔时本公司发现{{item.dto.surnameLsTemp}}经本公司重新审核后，承保内容变更如下:（交费方式与主险一致/币值单位：人民币元）</p>
          <!-- 解除合同通知书 -->
          <p v-show="item.li_count == 0" style="margin-top:4px;font-family: 宋体;line-height:20px;">&nbsp;&nbsp;保单号码为：{{item.dto.chdrnum}}, 因下述原因,本公司将作出如下决定:</p>
          <p v-show="item.li_count == 0" style="margin-top:4px;font-family: 宋体;line-height:20px;">&nbsp;&nbsp;因本次索赔时本公司发现{{item.dto.surnameLsTemp}}经本公司重新审核后, 根据相关法律和合同约定, 作如下处理:</p>
          <p v-for="(temp11,i) in item.dto.lsTemp11" :key="i" style="margin-top:4px;font-family: 宋体;line-height:20px;">&nbsp;&nbsp;{{temp11}}</p>
          <p style="margin-top:18px;">&nbsp;</p>
          <p v-show="item.dto.lsTemp12" style="margin-top:4px;font-family: 宋体;line-height:20px;">&nbsp;&nbsp;本次需补缴增加的保费合计:{{item.dto.lsTemp12}}元。</p>
          <p v-show="item.dto.lsTemp13" style="margin-top:4px;font-family: 宋体;line-height:20px;">&nbsp;&nbsp;{{item.dto.lsTemp13}}</p>
          <p v-show="item.li_count > 0" style="margin-top:4px;font-family: 宋体;line-height:20px;">&nbsp;&nbsp;如您同意接受本通知书之变更内容，请您及被保险人在下方亲笔签名确认，并将本通知书通过营销员或亲自递送至本公司。</p>
          <p v-show="item.li_count > 0" style="margin-top:4px;font-family: 宋体;line-height:20px;">&nbsp;&nbsp;如您不同意接受本通知书之变更内容或本公司在{{item.dto.lsNextdate}}前未收到您的回复,则本公司将依法解除合同。</p>
          <p v-show="item.li_count > 0" style="margin-top:4px;font-family: 宋体;line-height:20px;">&nbsp;&nbsp;为了确保您的权益,本通知书通过挂号信邮寄和本公司营销员亲自送达，您签署一份即可。</p>
          <p v-show="item.li_count == 0" style="margin-top:20px;font-family: 宋体;line-height:20px;">&nbsp;&nbsp;特此通知。</p>
          <p v-show="item.li_count == 0" style="margin-top:4px;font-family: 宋体;line-height:20px;">&nbsp;&nbsp;注：为了确保您的权益,本通知书通过挂号信寄送和本公司营销员亲自送达。</p>
          <p style="margin-top:20px;font-family: 宋体;line-height:20px;text-align:right;">中信保诚人寿保险有限公司</p>
          <p style="margin-top:4px;font-family: 宋体;line-height:20px;text-align:right;">{{item.dto.lsEnddate}}</p>
          <div v-show="item.li_count > 0">
            <el-row style="margin-top:20px;">
              <el-col :span="10">
                <div style="margin-top:6px;border: 1px dashed #333;"></div>
              </el-col>
              <el-col :span="3">
                <div style="font-family: 宋体;text-align:center;">请&nbsp;勿&nbsp;裁&nbsp;开</div>
              </el-col>
              <el-col :span="11">
                <div style="margin-top:6px;border: 1px dashed #333;"></div>
              </el-col>
            </el-row>
            <p style="margin-top:20px;font-family: 宋体;line-height:20px;">◎本人同意贵公司上述通知书之内容，并作为保险合同之组成部分.</p>
            <p style="margin-top:4px;font-family: 宋体;line-height:20px;">此致&nbsp;中信保诚人寿保险有限公司</p>
          </div>
          <div v-show="item.li_count > 0" style="overflow:hidden;">
            <div  style="float:right;">
              <div style="overflow:hidden">
                <p style="margin-top:4px;font-family: 宋体;line-height:20px;width:80px;float:left">投保人签名:</p>
                <p style="margin-top:4px;font-family: 宋体;height:16px;width:150px;border-bottom: 1px solid #999;float:left"></p>
              </div>
              <div style="overflow:hidden">
                <p style="margin-top:4px;font-family: 宋体;line-height:16px;width:86px;float:left">被保险人签名:</p>
                <p style="margin-top:4px;font-family: 宋体;height:16px;width:144px;border-bottom: 1px solid #999;float:left"></p>
              </div>
              <div style="overflow:hidden">
                <p style="margin-top:4px;font-family: 宋体;line-height:20px;width:80px;float:left">监护人签名:</p>
                <p style="margin-top:4px;font-family: 宋体;height:16px;width:150px;border-bottom: 1px solid #999;float:left"></p>
              </div>
              <div style="overflow:hidden">
                <p style="margin-top:4px;font-family: 宋体;line-height:20px;">(须与留存本公司的最新签名样式相符)</p>
                <p style="margin-top:10px;font-family: 宋体;line-height:20px;">签署日期&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;月&nbsp;&nbsp;日</p>
              </div>
            </div>
          </div>
        </div>
        <p style="margin-botton:100px">&nbsp;</p>
      </div>
      <p style="page-break-before:always"></p>
      <!-- 原代码 -->
      <!-- <table style="display:table-header-group;" >
        <thead style="display:table-header-group">
          <tr>
            <th width="400px" align="left">
              <img width="180px" height="60px" src="../../../../assets/img/Logo_mianxx.png">
            </th>
            <th width="1000px">
              <p style="font-family: 'SimSun';font-size: 24px;margin-bottom: 15px;">中信保诚人寿保险有限公司</p>
              <p style="font-family: 'SimSun';font-size: 14px;">承保内容变更通知书</p>
            </th>
            <th width="500px">
              <p style="font-family: 'SimSun' !important;text-align: left;font-size: 24px;">客户服务热线</p>
              <p style="text-align: left;">4008-838-838或95558</p>
            </th>
          </tr>
        </thead>
        <tbody style="display:table-row-group"></tbody>
      </table>
      <div class="contextbox" v-for="(item, index) in dataHtml" :key="index">
        <div v-html="item.context" style="layout-grid:18pt;font-family: 宋体;font-size: 13;margin-bottom: 0;"></div>
      </div> -->

    </div>
    <div style="text-align:center" v-if="!contexts.length">暂无数据</div>
  </div>
</template>

<script>
import JsBarcode from 'jsbarcode' // 条形码
export default {
  data() {
    return {
      contexts: [],
    }
  },
  mounted() {
    this.getData();// 查
    // this.$nextTick(()=>{
    //   this.barcode('M0100401');
    // });
  },


  methods: {
    // 查询数据
    getData() {
      let booksDatas =JSON.parse(sessionStorage.getItem("booksDatas"))
      this.contexts = booksDatas.context;
    },

     // 条形码生成
    barcode(coupon) {
      this.$nextTick(()=>{
          JsBarcode("#barcode", coupon, {
    	    format: "CODE39",//选择要使用的条形码类型
    	    width:1,//设置条之间的宽度
    	    height:40,//高度
    	    displayValue:false,//是否在条形码下方显示文字
    	    text:coupon,//覆盖显示的文本
    	    // fontOptions:"normal italic",//使文字加粗体或变斜体
    	    // font:"fantasy",//设置文本的字体
    	    textAlign:"center",//设置文本的水平对齐方式
    	    textPosition:"button",//设置文本的垂直位置
    	    textMargin:0,//设置条形码和文本之间的间距
    	    fontSize:0,//设置文本的大小
    	    background:"#fff",//设置条形码的背景
    	    lineColor:"#000",//设置条和文本的颜色。
    	    margin:0//设置条形码周围的空白边距
    	  });
      })
    },
  }

}
</script>

<style lang="less" scoped>
.insuredbox {
  padding: 30px;
  letter-spacing: 1px;
  // text-shadow:0.15pt 0px 0px black,0.25pt 0px 0px black,0.35pt 0px 0px black,-0.25pt 0px 0px black,0px 0.25pt 0px black,0px -0.25pt 0px black;

  // #printMe {
  //   .logobox {
  //     display: flex;
  //     justify-content: space-between;
  //     .imgbg {
  //       width: 240px;
  //       height: 90px;
  //       background-image: url("../../../../assets/img/Logo_mianxx.png");
  //       background-repeat: no-repeat;
  //       background-size: 100% auto;
  //     }

  //     .titlesbox {
  //       width: 400px;
  //       height: 80px;
  //       text-align: center;
  //       font-weight: 800;

  //       p {
  //         font-family: 'SimSun';

  //         &:nth-child(1) {
  //           font-size: 28px;
  //           margin-bottom: 20px;
  //         }

  //         &:nth-child(2) {
  //           font-size: 18px;
  //         }
  //       }
  //     }

  //     .phonebox {
  //       width: 240px;
  //       height: 80px;
  //       font-weight: 800;

  //       p {
  //         font-family: 'SimSun';

  //         &:nth-child(1) {
  //           font-size: 36px;
  //         }

  //         &:nth-child(2) {
  //           font-size: 14px;
  //         }
  //       }
  //     }
  //   }

    // .contextbox {
    //   margin: 0 auto;

    //   span,
    //   p {
    //     font-size: 16px;
    //     font-family: 'SimSun';
    //   }

    //   .el-form-item {
    //     font-family: 'SimSun';
    //   }

    //   .line {
    //     font-family: 'SimSun';
    //     border-bottom: 1px solid #000;
    //   }

    //   .fweight {
    //     font-weight: 800;
    //     margin-bottom: 10px;
    //   }

    //   table {
    //     font-size: 16px;
    //     border-spacing: 0px;

    //     th,
    //     td {
    //       font-weight: normal;
    //       font-family: 'SimSun';
    //       line-height: 26px;
    //     }

    //     .th1 {
    //       width: 10% !important;
    //       border-bottom: 2px solid #000;
    //     }

    //     .td1 {
    //       text-align: center;
    //       font-size: 14px;
    //     }

    //     .th2 {
    //       width: 300px;
    //       border-bottom: 2px solid #000;

    //       &:nth-child(1) {
    //         width: 950px;
    //       }
    //     }

    //     .talign {
    //       text-align: left;
    //     }
    //   }
    // }
  // }

  .logobox {
    overflow: hidden;

    // .imgbg {
    //   margin-left: 43%;
    //   margin-bottom: 15px;
    //   float: left;
    //   width: 240px;
    //   height: 90px;
    //   background-image: url("../../../../assets/img/Logo_mianxx.png");
    //   background-repeat: no-repeat;
    //   background-size: 100% auto;
    // }

    .phonebox {
      margin-left: 20%;
      float: left;
      width: 240px;
      height: 80px;
      font-weight: 800;

      p {
        font-family: 'SimSun';

        &:nth-child(1) {
          font-size: 20px;
        }

        &:nth-child(2) {
          font-size: 14px;
        }
      }
    }
  }

  .titles {
    font-family: 'SimSun';
    text-align: center;
    font-weight: 800;
    margin-bottom: 10px;

    &:nth-of-type(1) {
      font-size: 28px;
    }

    &:nth-of-type(2) {
      font-size: 18px;
    }
  }

  .contextbox {
    padding-top: 30px;
    width: 1000px;
    font-family: 'SimSun';
    line-height: 24px;
    margin: 0 auto;

  }
}
</style>
